<template>
  <div>
    <!-- 面包屑部分 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片部分 -->
    <el-card>
      <el-button type="primary" @click="addCate">添加分类</el-button>
      <el-divider></el-divider>

      <tree-table
        width="80%"
        :data="cateList"
        :columns="column"
        :show-index="true"
        :selection-type="false"
        :expand-type="false"
        border
        index-text="#"
      >
        <template slot="isok" slot-scope="scope">
          <i
            style="color: lightgreen; font-size: 18px"
            class="el-icon-success"
            v-if="scope.row.cat_deleted === false"
          >
          </i>
          <i
            v-else
            style="color: red; font-size: 18px"
            class="el-icon-error"
          ></i>
        </template>
        <template slot="sort" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag v-if="scope.row.cat_level === 1" type="success">
            二级
          </el-tag>
          <el-tag v-if="scope.row.cat_level === 2" type="warning">三级</el-tag>
        </template>
        <template slot="operation" slot-scope="scope">
          <el-button
            @click="iseditCate(scope.row.cat_id)"
            type="primary"
            size="mini"
            icon="el-icon-edit"
          >
            编辑
          </el-button>
          <el-button
            @click="isDelete(scope.row.cat_id)"
            type="danger"
            size="mini"
            icon="el-icon-delete"
          >
            删除
          </el-button>
        </template>
      </tree-table>

      <el-pagination
        class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.pagenum"
        :page-sizes="[3, 5, 8]"
        :page-size="queryinfo.pagesize"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加分类弹出框 -->
    <el-dialog
      title="添加分类"
      @close="addCateColes"
      :visible.sync="isCate"
      width="50%"
    >
      <el-form
        :model="addCateFrom"
        :close-on-click-modal="false"
        :rules="addCateFromRules"
        ref="addCateFromRef"
        label-width="80px"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addCateFrom.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-cascader
            v-model="CateFormKey"
            :options="CateFormList"
            :props="cateProp"
            @change="cascaderChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isCate = false">取 消</el-button>
        <el-button type="primary" @click="okCate">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑分类文本框 -->
    <el-dialog title="编辑分类" :visible.sync="isEdit" width="50%">
      <el-form
        :model="editCateFrom"
        :close-on-click-modal="false"
        :rules="editCateFromRules"
        ref="editCateFromRef"
        label-width="80px"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="editCateFrom.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEdit = false">取 消</el-button>
        <el-button type="primary" @click="okEdit(editCateFrom.cat_id)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Cate',
  created() {
    this.getCateList()

  },
  data() {
    return {
      // 商品分类数据列表
      cateList: [],
      //请求参数
      queryinfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      // 接收的数据总数
      total: 0,
      // 为表格配置列属性
      column: [{
        label: '分类名称',
        prop: 'cat_name',


      }, {
        label: '是否有效',
        type: 'template',
        template: 'isok',


      }, {
        label: '排序',
        type: 'template',
        template: 'sort',


      }, {
        label: '操作',
        type: 'template',
        template: 'operation',
        align: 'center'
      },],
      // 是否弹出添加分类框
      isCate: false,
      // 是否弹出编辑分类框
      isEdit: false,
      // 添加分类的数据
      addCateFrom: {
        cat_pid: 0,
        cat_name: '',
        cat_level: 0
      },
      // 父级分类的列表
      CateFormList: [],
      // 联级选择器配置
      cateProp: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children',
        expandTrigger: "hover",
        checkStrictly: true
      },
      // 把双向绑定的数据定义成一个数组
      CateFormKey: [],
      // 编辑时的表单内容
      editCateFrom: {
        cat_name: ''
      },

      // 添加表单分类规则
      addCateFromRules: {
        cat_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
      },
      // 编辑表单分类规则
      editCateFromRules: {
        cat_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
      }

    }
  },
  methods: {
    getCateList() {
      this.$http.get(`http://127.0.0.1:8888/api/private/v1/categories`, { params: this.queryinfo })
        .then((response) => {
          if (response.data.meta.status !== 200) {
            this.$message.error(response.data.meta.msg);
          } else {
            this.cateList = response.data.data.result;
            // 为总数据条数赋值
            this.total = response.data.data.total
          }
        }).catch((error) => console.log(error))

    },
    // 每页条数改变时触发
    handleSizeChange(value) {
      this.queryinfo.pagesize = value
      this.getCateList()
    },
    // 页面改变时触发
    handleCurrentChange(value) {
      this.queryinfo.pagenum = value
      this.getCateList()
    },
    // 获取联机选择器中的数据列表
    getCateFormList() {
      this.$http.get(`http://127.0.0.1:8888/api/private/v1/categories`,
        { params: { type: 2 } })
        .then((response) => {
          if (response.data.meta.status !== 200) {
            this.$message.error(response.data.meta.msg);
          } else {
            this.CateFormList = response.data.data
            // 为总数据条数赋值
            console.log(this.CateFormList, '22');
          }
        }).catch((error) => console.log(error))

    },
    addCate() {
      this.getCateFormList()
      this.isCate = true
    },
    // 通过数据绑定获得的数组来定义所添加分类的数据
    cascaderChange() {
      console.log(this.CateFormKey);
      if (this.CateFormKey.length > 0) {
        this.addCateFrom.cat_pid = this.CateFormKey[this.CateFormKey.length - 1]
        this.addCateFrom.cat_level = this.CateFormKey.length

      } else {
        this.addCateFrom.cat_pid = 0
        this.addCateFrom.cat_level = 0
      }
    },
    // 确认添加分类
    okCate() {
      console.log(this.addCateFrom);
      this.$refs.addCateFromRef.validate(valid => {
        if (valid) {
          this.$http.post(`http://127.0.0.1:8888/api/private/v1/categories`,
            this.addCateFrom)
            .then((response) => {
              console.log(response);
              if (response.data.meta.status !== 201) {
                this.$message.error(response.data.meta.msg);
              } else {
                this.$message.success(response.data.meta.msg);
                this.getCateList()
                this.isCate = false
              }
            }).catch((error) => console.log(error))
        } else {
          this.$message.error('请输入完整的信息!!!');
        }

      })

    },
    // 重置添加分类表单
    addCateColes() {
      this.$refs.addCateFromRef.resetFields()
      this.CateFormKey = []
      this.addCateFrom.cat_pid = 0
      this.addCateFrom.cat_level = 0
    },
    // 是否弹出编辑文本框
    iseditCate(id) {

      this.$http.get(`http://127.0.0.1:8888/api/private/v1/categories/${id}`)
        .then((response) => {
          if (response.data.meta.status !== 200) {
            this.$message.error(response.data.meta.msg);
          } else {
            this.editCateFrom = response.data.data

          }
        }).catch((error) => console.log(error))
      this.isEdit = true
    },
    // 确定编辑
    okEdit(id) {
      this.$http.put(`http://127.0.0.1:8888/api/private/v1/categories/${id}`,
        { cat_name: this.editCateFrom.cat_name })
        .then((response) => {
          if (response.data.meta.status !== 200) {
            this.$message.error(response.data.meta.msg);
          } else {
            this.$message.success(response.data.meta.msg);
            this.getCateList()
          }
        }).catch((error) => console.log(error))
      this.isEdit = false
    },
    // 确认删除
    isDelete(id) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete(`http://127.0.0.1:8888/api/private/v1/categories/${id}`)
          .then((response) => {
            if (response.data.meta.status !== 200) {
              this.$message.error(response.data.meta.msg);
            } else {
              this.$message.success(response.data.meta.msg);
              this.getCateList()
            }
          }).catch((error) => console.log(error))

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }

}
</script>

<style scoped>
.el-cascader {
  width: 100%;
}
</style>